<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <el-page-header @back="goBack" content="公告详情" class="header"></el-page-header>
    <div class="body">
      <p>尊敬的­­华为商城用户：<br />
        <br />
  您好！感谢您一直以来对华为商城的信任与支持。由于业务调<br /><br />整，我们决定于12月上旬将我的智慧生活频道从华为商城下<br /><br />线，具体方式为关闭频道入口。您仍可通过直接搜索商品名称、<br /><br />进入场景购频道等其他方式购买原本在该频道展示的商品，请您<br /><br />放心，本次调整不会影响您的购物体验。

同时，对于本次频道<br /><br />下线给您带来的不便，我们深感歉意，我们将持续关注您的需求<br /><br />并优化我们的产品及服务，再次感谢您的支持与信任。<br /><br />

2023年11月14日

</p>
    </div>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'w_e_five',
  data () {
    return {
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toTop () {
      window.location.reload()
    }
  },
  mounted () {
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.top{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 100px;
  right: 5px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 50%;
}
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.header{
  width: 100%;
  height:5%;
}
.body{
  width: 450px;
  height: 600px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: solid 1px gray
}
</style>
